<html>
<body>
<form onsubmit='return false;'>
<table>
<tr>
<td>Enter Name (A reference field)</td><td><input readonly id=f1></td><td id=rf1>Wasthis</td>
</tr>
<tr>
<td>Enter Age (No reference field)</td><td><input readonly id=f2></td><td id=rf2></td>
</tr>
</table>
</form>
</body>

<script>
 activefield = 'f1';

 setname();
 
 function getname() {
  // Validate the entry.
  fieldid = 'f1';
	var ob = document.getElementById(fieldid) ;
	ob.readOnly = true ;	
	setage();
 }

 function setname() {
  fieldid = 'f1';
	var ob = document.getElementById(fieldid) ;
	ob.addEventListener('change',function() {getname()},false);
	ob.readOnly = false;
  ob.focus();
 }
 function getage() {
  fieldid = 'f2';
	var ob = document.getElementById(fieldid) ; 
  xconn = new XMLHttpRequest();
  xconn.onreadystatechange = function() {
    if (xconn.readyState == 4 && xconn.status == 200) {
      r = xconn.responseText;
			id = eval(r);
			var t = '<table>';
			for (var i = 0 ; i < id.length;i++) {
			 t = t + '<tr>';
			 for (var j = 0 ; j < id[i].length;j++) {
			  t = t + '<td>' + id[i][j] + '</td>';
			 }
			 t = t + '</tr>';
			}
			t = t + '</table>';
			dest = document.getElementById('r' + fieldid) ;
			dest.innerHTML = t ;
    }
	}
  xconn.open("POST", "ajax.php", true);
  xconn.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  var sendstr = 'age=' + ob.value ;
  xconn.send(sendstr);	
 } 

 function setage() {
  fieldid = 'f2';
	var ob = document.getElementById(fieldid) ;
	ob.addEventListener('keyup',function() {getage()},false);
	ob.readOnly = false;
  ob.focus();
 }
</script>
</html>